<template>
  <view>
    <!-- <uni-nav-bar
      left-icon="back"
      title="姻缘解析"
      fixed="true"
      status-bar="true"
      @clickLeft="goback"
    ></uni-nav-bar> -->
    <view class="body">
      <view class="name">姓名：{{ male }} VS {{ female }}</view>
      <view class="title">缘分签语</view>
      <view class="inner">{{ list ? list[num].title : null }}</view>
      <view class="speak">{{ list ? list[num].message : null }}</view>
    </view>
  </view>
</template>
<script>
import list from "./index.json";
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
export default {
  components: { uniNavBar },
  data() {
    return {
      list: [],
      male: "123",
      female: "1323",
      num: 0,
    };
  },
  onLoad: function (option) {
    this.list = list;
    this.num = Math.floor(Math.random() * 10);
    console.log(option);
    this.male = option.male;
    this.female = option.female;
  },
  methods: {
    goback() {
      uni.reLaunch({
        url: `./index`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  .name {
    width: 100%;
    height: 100upx;
    margin: 20upx 20upx;
    display: flex;
    align-items: center;
  }
  .title {
    font-weight: bolder;
    width: 100%;
    height: 100upx;
    margin: 20upx 20upx;
    display: flex;
    align-items: center;
  }
  .inner {
    color: rgb(209, 37, 37);
    width: 100%;
    height: 100upx;
    margin: 20upx 20upx;
    display: flex;
    align-items: center;
  }
  .speak {
    width: 100%;
    height: 100upx;
    margin: 20upx 20upx;
    display: flex;
    align-items: center;
  }
}
</style>